<template>
  <div id="ForePerson">
    <div style="width: 70vw;margin:0 auto;">
      <el-container>

        <el-main>
          <div class="person-main">
            <div class="common-layout forePerson-el-container">
              <el-container>
                <el-header>
                  <div class="forePerson-el-header-div">
                    <div class="block">
                      <el-avatar :size="100" fit="cover"
                                 :src="userObject.avatar"/>
                    </div>
                    <div>
                      <p></p>
                      <p></p>
                      <p>{{ userObject.username }}</p>
                      <p>Lv5</p>
                      <p>服务端开发</p>
                      <p>
                        公众号
                        <span v-if="checkUserId">
                         <el-button type="primary">
                           <el-icon><Plus/></el-icon>&nbsp;关注
                         </el-button>
                         <el-button type="primary" plain>
                           <el-icon><ChatSquare/></el-icon>&nbsp;私信
                         </el-button>
                       </span>
                        <span v-else>
                         <el-button type="primary" @click="$router.push('/profile')">
                           <el-icon><Plus/></el-icon>&nbsp;编辑资料
                         </el-button>
                       </span>
                      </p>
                      <p></p>
                      <p></p>
                    </div>
                  </div>
                  <div class="forePerson-el-header-div-1">
                    <el-icon color="#ff9322">
                      <Trophy/>
                    </el-icon>&nbsp;获得徽章&nbsp;0
                  </div>
                </el-header>
                <el-main>
                  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                      <el-tab-pane label="文章" name="1">
                          <PersonArticle :userId="parseInt($route.params.id)" :userObject="userObject"></PersonArticle>
                      </el-tab-pane>
                    <el-tab-pane label="动态" name="2">
                      <div style="min-height: 50vh;background: #fff;display: flex;justify-content: center;align-items: center">
                        此功能暂未开启
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="专栏" name="3">
                      <div style="min-height: 50vh;background: #fff;display: flex;justify-content: center;align-items: center">
                        此功能暂未开启
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="沸点" name="4">
                      <div style="min-height: 50vh;background: #fff;display: flex;justify-content: center;align-items: center">
                        此功能暂未开启
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="收藏" name="5">
                      <div style="min-height: 50vh;background: #fff;display: flex;justify-content: center;align-items: center">
                        此功能暂未开启
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="关注" name="6">
                      <div style="min-height: 50vh;background: #fff;display: flex;justify-content: center;align-items: center">
                        此功能暂未开启
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="赞同" name="7">
                      <div style="min-height: 50vh;background: #fff;display: flex;justify-content: center;align-items: center">
                        此功能暂未开启
                      </div>
                    </el-tab-pane>
<!--                    <el-tab-pane >-->
<!--                      <template #label>-->
<!--                      </template>-->
<!--                    </el-tab-pane>-->
                  </el-tabs>

                  <div class="label-search">
<!--                    <el-icon><Search/></el-icon>-->
                  </div>
                </el-main>
                <el-footer></el-footer>
              </el-container>
            </div>
            <!--             <div class="each-personBlogList" v-for="(item) in blogList" :key="item.id" > -->
            <!--                 <div @click="$router.push('/blog/' + item.id)">-->
            <!--                     <p v-text="item.createTime"></p>-->
            <!--                     <p v-text="item.title"></p>-->
            <!--                     <p v-html="item.content"></p>-->
            <!--                 </div>-->
            <!--                 <span v-if="userObject.username == curUser.username" @click="dropBlog(item.id)" >-->
            <!--                    <svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-042ca774="">-->
            <!--                      <path fill="currentColor" d="M466.752 512l-90.496-90.496a32 32 0 0145.248-45.248L512 466.752l90.496-90.496a32 32 0 1145.248 45.248L557.248 512l90.496 90.496a32 32 0 11-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 01-45.248-45.248L466.752 512z"></path><path fill="currentColor" d="M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"></path>-->
            <!--                    </svg>-->
            <!--                 </span>-->
            <!--             </div>-->
          </div>
        </el-main>

        <el-aside width="20vw">
          <div class="person-aside">
<!--            <div>-->
<!--              <div>关注</div>-->
<!--              <div>1</div>-->
<!--              <div>粉丝</div>-->
<!--            </div>-->
<!--            <div>-->
<!--              <div>昵称</div>-->
<!--              <div>{{userObject.username}}</div>-->
<!--            </div>-->
<!--            <div>-->
<!--              <div>邮箱</div>-->
<!--              <div>{{userObject.email}}</div>-->
<!--            </div>-->
<!--            <div>-->
<!--              <div>性别</div>-->
<!--              <div>{{userObject.sex}}</div>-->
<!--            </div>-->
<!--            <div>-->
<!--              <div>地址</div>-->
<!--              <div>{{userObject.address}}</div>-->
<!--            </div>-->
<!--            <div v-text="'加关注'" style="text-align:center;"></div>-->
          </div>
<!--          <div class="person-aside2">-->
<!--            <h1>阅读排行</h1>-->
<!--            &lt;!&ndash; v-for遍历 &ndash;&gt;-->
<!--            <p>测试</p>-->
<!--          </div>-->
        </el-aside>


      </el-container>
    </div>
  </div>
</template>

<script>
import request from '../../utils/request'
import {ElMessageBox, ElMessage} from 'element-plus'
import {Plus, ChatSquare, Trophy,Search} from '@element-plus/icons'
import PersonArticle from "@/components/blog/PersonArticle.vue";
export default {

  name: 'ForePerson',
  components: {
    Plus, ChatSquare, Trophy,Search,
    PersonArticle
  },

  data() {
    return {
      userObject: {},
      blogList: [],
      curUser: {},
      curUserId:'',
      activeName: "1",
      propUserId:'',
    }
  },

  computed:{
    checkUserId(){
      return this.curUserId == this.propUserId?false:true
    }
  },

  created() {
    this.load()
    this.initProp()
  },


  mounted() {
    this.curUser = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
  },

  methods: {
    load() {
      request.get("/fore/user/" + this.$route.params.id).then(res => {
        if (res.code == 200 || res.code == 0) {
          this.userObject = res.data.user
          this.blogList = res.data.blog
        }
      })
    },

    initProp(){
      this.curUser = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
      this.curUserId = sessionStorage.getItem("userId") ? JSON.parse(sessionStorage.getItem("userId")) : ''
      this.propUserId = this.$route.params.id
      console.log("curUserId",this.curUserId)
      console.log("propUserId",this.propUserId)
    },

    dropBlog(blogId) {
      ElMessageBox.confirm(
          '确认删除?',
          'Warning',
          {
            confirmButtonText: 'OK',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        request.delete("blog/delete/", {
          params: {
            id: blogId
          }
        }).then(res => {
          if (res.code == 0) {
            ElMessage({
              type: 'success',
              message: '删除成功!',
            })
            location.reload(0)
          }
        })
      })
    },

    handleClick(){},
  }

}
</script>

<!--<style lang="less" scope>-->
<!--@import '../../style/ForeBlog.less';-->
<!--@import '../../style/ForePerson.less';-->
<!--</style>-->

<!--<style lang="less" src="../../style/ForeBlog.less" scope></style>-->
<style lang="less" src="../../style/ForePerson.less" scope></style>
